﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
    <style type="text/css">
        *{font-family:'Microsoft YaHei';}
        #fm label{ margin-top: 6px; }
        #error_div{color:red}
        #error_div ul{list-style: circle;}
        #error_div ul li{text-align: left;}
    </style>
    <!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/new-user.css" type="text/css" media="screen" />
{% endblock %}

{% block content %}
<div class="container-fluid">
            <div id="pad-wrapper" class="new-user">
                <div class="row-fluid header">
                    <h3>创建新客户</h3>
                </div>
                
                <div class="row-fluid form-wrapper">
                    <!-- left column -->
                    <div class="span9 with-sidebar">
                        <div class="container">
                            {% if sign%}
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>成功!</strong> 添加客户：{{form.account_name.value}}
                            </div>
                            {%endif%}

                            <!--遍历传回表单数据中，将其中的错误信息显示出来-->
                            <div id="error_div">
                                {% if error%}
                                <div class="alert alert-danger" role="alert">
                                    {%for field in form%}
                                        {{field.errors}}  
                                    {%endfor%}
                                </div>
                                {%endif%}
                            </div>
                            <form class="new_user_form inline-input" id="fm"  method="post" action="" >
                            {% csrf_token %}  
                                {{form.non_field_errors}}
                                 <div class="span9 field-box">
                                    <label for="name">姓名:</label>
                                    {{ form.account_name }}
                                    {{ form.account_name.errors }}*
                                </div>
                                <div class="span3 field-box">
                                    <label for="level">级别:</label>
                                    <div class="ui-select span2">
                                        <select name="level">
                                            <option value="1" />普通客户
                                            <option value="2" />长期客户
                                            <option value="3" />VIP客户
                                            <option value="4" />潜在客户
                                        </select>
                                    </div>
                                </div>
                                <div class="span9 field-box">
                                    <label for="phone">手机:</label>
                                    {{ form.phone }}
                                    {{ form.phone.errors }}*
                                </div>
                                <div class="span12 field-box">
                                        <div class="span5">
                                            <label>QQ:</label>
                                            <input  name="qq" type="text" />
                                         </div>
                                        <div class="span4">
                                            <label>QQ 昵称:</label>
                                            <input name="qq_nickname" type="text" />
                                        </div>
                                </div>
                                <div class="span9 field-box">
                                     <div class="span5">
                                            <label>微信:</label>
                                            <input  name="weixin" type="text" />
                                       </div>
                                    <div class="span4">
                                    <label>微信昵称:</label>
                                    <input name="weixin_nickname" type="text" />
                                </div>
                                </div>
                                
                                <div class="span9 field-box">
                                    <label>地址:</label>
                                    <div class="address-fields">

                                        <div class="ui-select span3">
                                            <select name="province"></select>
                                        </div>
                                        <div class="ui-select span3">
                                            <select name="city"></select>
                                        </div>
                                        <div class="ui-select span3">
                                            <select name="area"></select>
                                        </div>

                                        <input class="span9" type="text" name="street" 
                                        placeholder="街道" style="margin-top: 10px;" />
                                    </div>
                                </div>
                                <div class="span6 field-box textarea">
                                    <label>备注:</label>
                                    <textarea class="span6" name="notes"></textarea>                 
                                </div>
                                <div class="span5 field-box actions">
                                    <input type="submit" class="btn-glow primary" value="创建" />
                                    <span>OR</span>
                                    <input type="reset" value="取消" class="reset" />
                                </div>
                            </form> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
 {% endblock %}

{% block customizedJS %}
    <!--省市级联特效-->
    <script charset="utf-8" src="/static/js/PCASClass.js"></script>
    
    <script type="text/javascript">
        //new PCAS("province","city","area","上海市","上海市","徐汇区") ;
        new PCAS("province","city","area",SPT,SCT,SAT) ;
        $(function () {

           //当输入框获取焦点时，清空错误提示容器中的错误信息-
            $("#fm input").focus(function(){
                $("#error_div").animate({height:'0px'},"slow");
                $("#error_div").html("");
            });

            // toggle form between inline and normal inputs
            var $buttons = $(".toggle-inputs button");
            var $form = $("form.new_user_form");

            $buttons.click(function () {
                var mode = $(this).data("input");
                $buttons.removeClass("active");
                $(this).addClass("active");

                if (mode === "inline") {
                    $form.addClass("inline-input");
                } else {
                    $form.removeClass("inline-input");
                }
            });
        });
    </script>
{% endblock %}  